<template>
    <div class="wrap good-info">
        <div class="wrap-header">
            <el-form :model="infoForm" :rules="rules" ref="infoForm" label-width="240px" size="mini">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="infoForm.name"></el-input>
                </el-form-item>
                <el-form-item label="商品所属" prop="idol">
                    <el-select v-model="infoForm.idol" filterable placeholder="请选择" size="mini ">
                        <el-option
                            v-for="item in options"
                            :key="item.idolId"
                            :label="item.name"
                            :value="item.idolId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="商品描述" prop="content">
                    <el-input v-model="infoForm.content"></el-input>
                </el-form-item>
                <el-form-item label="单价">
                    <el-input-number v-model="infoForm.price" :precision="2" :step="0.1" :min="0.01"></el-input-number>
                </el-form-item>
                <el-form-item label="库存">
                    <el-input-number v-model="infoForm.stock" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="商品图片">
                    <el-upload
                        class="avatar-uploader"
                        :action="uploadUrl"
                        name="multipartFile"
                        :show-file-list="false"
                        :on-success="handleImgSuccess">
                        <img v-if="infoForm.img" :src="baseURL+infoForm.img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div class="center">
                <el-button size="mini" @click="save">确 认</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {baseURL} from "../../utils/axios";

    export default {
        name: "goodInfo",
        data() {
            return {
                baseURL: baseURL,
                uploadUrl: baseURL + '/api/common/uploadFile?type=goodImg',
                infoForm: {
                    idol: '',
                    name: '',
                    price: '',
                    content: '',
                    stock: '',
                    img: '',
                },
                options: [],
                rules: {
                    name: [
                        {required: true, message: '请输入商品名称', trigger: 'blur', whitespace: true},
                    ],
                    idol: [
                        {required: true, message: '请选择商品所属', trigger: 'blur'},
                    ],
                    price: [
                        {required: true, message: '请输入商品单价', trigger: 'blur', whitespace: true},
                    ],
                    content: [
                        {required: true, message: '请输入商品描述', trigger: 'blur', whitespace: true},
                    ],
                    stock: [
                        {required: true, message: '请输入商品库存', trigger: 'blur', whitespace: true},
                    ],
                }
            }
        },
        methods: {
            handleImgSuccess(res, file) {
                this.infoForm.img = res.msg;
            },
            beforeImgUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            getIdolList() {
                this.$api.idol.idolList({
                    "pageNum": 1,
                    "pageSize": 100,
                    "userId": sessionStorage.getItem('id')
                }).then(res => {
                    this.options = res.data.list;
                })
            },
            save() {
                this.$refs.infoForm.validate(valid => {
                    if (valid) {
                        this.$api.mall.goodsAdd({
                            "description": this.infoForm.content,
                            "idolId": this.infoForm.idol,
                            "images": this.infoForm.img,
                            "name": this.infoForm.name,
                            "price": this.infoForm.price,
                            "publisherId": sessionStorage.getItem('id'),
                            "stock": this.infoForm.stock
                        }).then(res => {
                            this.$message.success('操作成功');
                            this.$router.back();
                        })
                    }
                })

            }
        },
        mounted() {
            this.getIdolList();
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .good-info {
        .center {
            text-align: center;
        }
        .el-form {
            width: calc(100% - 200px);
            .mobile {
                display: flex;
                justify-content: space-between;
                &-input {
                    width: 75%;
                }
            }
        }
        .avatar-uploader .el-upload {
            border: 1px dashed $text-color-primary !important;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    }
</style>
